<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="form.data.pk_act_year_plan ? '年度活动计划编辑' : '新增年度活动计划'"
    ok-text="提交"
    @on-ok="ok">
    <Row class="mt20">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :rules="ruleValidate" :label-width="120">
          <FormItem prop="act_year" label="年份">
            <Select v-model="form.data.act_year" placeholder="请选择">
              <Option v-for="item in actYearCodeList" :value="item.code" :key="item.code">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="act_name" label="计划名称">
            <Input v-model="form.data.act_name" placeholder="请输入"></Input>
          </FormItem>
          <FormItem prop="act_type" label="活动类型">
            <Select v-model="form.data.act_type" placeholder="请选择">
              <Option v-for="item in actTypeCodeList" :value="item.code" :key="item.code">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="act_sdate" label="活动开始时间">
            <DatePicker type="month" placeholder="选择日期" :options="options.act_sdate" v-model="form.data.act_sdate"></DatePicker>
          </FormItem>
          <FormItem prop="act_edate" label="活动结束时间">
            <DatePicker type="month" placeholder="选择日期" :options="options.act_edate" v-model="form.data.act_edate"></DatePicker>
          </FormItem>
          <FormItem prop="remak" label="活动简述">
            <Input v-model="form.data.remak" type="textarea" placeholder="请输入" :rows="4"></Input>
          </FormItem>
          <FormItem prop="planImage" label="活动图片">
            <upload-img v-if="form.visible" @on-change="onUploadImg" :defaultImageList="defaultImageList"></upload-img>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </Modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import uploadImg from '@/components/upload-img'
  import yearplanApi from '@/api/yearplan'

  export default {
    name: 'update-modal',
    props: [
      'form'
    ],
    components: {
      uploadImg
    },
    data () {
      return {
        loading: true,
        defaultImageList: [],
        ruleValidate: {
          act_year: [
            { required: true, type: 'number', message: '请选择年份', trigger: 'change' }
          ],
          act_name: [
            { required: true, message: '请输入计划名称', trigger: 'blur' },
            { min: 1, max: 50, message: '计划名称字符长度应小于50', trigger: 'change' }
          ],
          act_type: [
            { required: true, type: 'number', message: '请选择计划类型', trigger: 'change' }
          ],
          act_sdate: [
            { required: true, type: 'date', message: '请选择活动开始时间', trigger: 'change' }
          ],
          act_edate: [
            { required: true, ype: 'date', message: '请选择活动结束时间', type: 'date', trigger: 'change' }
          ],
          remak: [
            { required: true, message: '请输入活动简述', trigger: 'change' },
            { min: 1, max: 100, message: '活动简述字符长度应小于100', trigger: 'change' }
          ],
          planImage: [
            { required: true, message: '请选择需要上传的图片' }
          ]
        },
        options: {
          act_sdate: {},
          act_edate: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        actYearCodeList: 'actYearCodeList',
        actTypeCodeList: 'actTypeCodeList'
      })
    },
    watch: {
      'form.visible': 'onClose',
      'form.data.act_sdate': function (val, oldVal) {
        this.options.act_edate.disabledDate = (date) => {
          let isDisabled = false
          if (this.form.data.act_sdate) {
            isDisabled = date && date.valueOf() < this.form.data.act_sdate.getTime()
          }
          return isDisabled
        }
      },
      'form.data.act_edate': function (val, oldVal) {
        this.options.act_sdate.disabledDate = (date) => {
          let isDisabled = false
          if (this.form.data.act_edate) {
            isDisabled = date && date.valueOf() > this.form.data.act_edate.getTime()
          }
          return isDisabled
        }
      }
    },
    methods: {
      ok () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请检查输入项目!')
            this.form.visible = true
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 100)
          }
        })
      },
      onClose (isVisible) {
        if (!isVisible) {
          this.$refs.form.resetFields()
          delete this.form.data.planImage
        } else {
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.planImage)
        }
      },
      onUploadImg (imgList) {
        this.form.data.planImage = imgList.filter((item) => {
          return item.name.length > 0
        }).map((item) => {
          if (item.response && item.response.responseData) {
            return item.response.responseData
          } else {
            return item.name
          }
        }).join(',')
        this.$refs.form.validateField('planImage')
      },
      async submitForm () {
        if (this.form.data.pk_act_year_plan) {
          const { body } = await yearplanApi.update(this.form.data)
          if (this.$apiHelper.requestSuccessed(body.responseCode)) {
            this.$Message.info('修改成功')
            this.form.visible = false
            this.$emit('submit')
          } else {
            setTimeout(() => {
              this.$Modal.error({
                title: '错误',
                content: body.desc,
                onOk: () => {}
              })
              this.loading = false
            }, 500)
          }
        } else {
          this.form.data.pk_rclub_info = this.userInfo.pkRclubInfo
          const { body } = await yearplanApi.create(this.form.data)
          if (this.$apiHelper.requestSuccessed(body.responseCode)) {
            this.$Message.info('创建成功')
            this.form.visible = false
            this.$emit('submit')
          } else {
            setTimeout(() => {
              this.$Modal.error({
                title: '错误',
                content: body.desc,
                onOk: () => {}
              })
              this.loading = false
            }, 500)
          }
        }
      }
    },
    mounted () {
      this.$store.dispatch('getCode', 'act_year')
      this.$store.dispatch('getCode', 'act_type')
    }
  }
</script>
